<template>
    <div class="dep-tree-container">
        <div class="tree-header">
            <div class="search-box">
                <el-input placeholder="搜索" prefix-icon="Search" v-model="searchKeyword" clearable />
                <el-button circle icon="Plus" v-if="showAddButton" @click="handleAdd"></el-button>
            </div>
        </div>

        <div class="tree-content">
            <el-tree
                ref="treeRef"
                :data="processedMenuData"
                :props="defaultProps"
                :highlight-current="true"
                :expand-on-click-node="false"
                node-key="id"
                @node-click="handleNodeClick"
                default-expand-all
            >
                <template #default="{ node, data }">
                    <div class="custom-tree-node">
                        <el-icon v-if="!node.isLeaf">
                            <component :is="data.icon || 'Folder'" />
                        </el-icon>
                        <span>{{ node.label }}</span>
                    </div>
                </template>
            </el-tree>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search, Plus, Setting, User, Folder, Document, ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    showAddButton: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['node-click', 'add'])

// 搜索关键词
const searchKeyword = ref('')

// tree组件引用
const treeRef = ref(null)

// 树形配置
const defaultProps = {
    children: 'children',
    label: 'label'
}

const inSon = [{
    id: '2-2',
    label: '自动化软件和',
    children: [
        { id: '2-2-1', label: '2024年' },
        { id: '2-2-2', label: '2023年' },
        { id: '2-2-3', label: '2022年' }
    ]
},
{
    id: '2-3',
    label: '文件控制程序',
    children: [
        { id: '2-3-1', label: '2024年' },
        { id: '2-3-2', label: '2023年' },
        { id: '2-3-3', label: '2022年' }
    ]
}]

function getSon() {
    const temp = JSON.parse(JSON.stringify(inSon));
    temp.forEach(item => {
        item.id = "p" + Math.random();
        item.children.forEach(item => {
            item.id = "s" + Math.random();
        })
    });
    return temp;
}

// 默认数据
const defaultData = [
    {
        id: '1',
        label: '1069体系',
        icon: 'Setting',
        children: [
            {
                id: '0-0',
                label: '计量中心',
                children: [
                    {
                        id: '0-0-0',
                        label: '中心本部',
                        children: getSon()
                    }
                ]
            },
            {
                id: '0-0',
                label: '检定所',
                children: [
                    {
                        id: '6-0-0',
                        label: '南宁检定中心',
                        children: getSon()
                    },
                    {
                        id: '6-0-1',
                        label: '柳州检定所',
                        children: getSon()
                    },
                    {
                        id: '6-0-2',
                        label: '桂林检定所',
                        children: getSon()
                    },
                ]
            },
        ]
    },
    {
        id: '2',
        label: '17025体系',
        icon: 'User',
        children: [
            {
                id: '1-0',
                label: '计量中心',
                children: [
                    {
                        id: '1-0-0',
                        label: '中心本部',
                        children: getSon()
                    }
                ]
            },
            {
                id: '2-0',
                label: '检定所',
                children: [
                    {
                        id: '2-0-0',
                        label: '南宁检定中心',
                        children: getSon()
                    },
                    {
                        id: '2-0-1',
                        label: '柳州检定所',
                        children: getSon()
                    },
                    {
                        id: '2-0-2',
                        label: '桂林检定所',
                        children: getSon()
                    },
                ]
            },
        ]
    }
]

// 处理后的菜单数据
const processedMenuData = computed(() => {
    if (searchKeyword.value) {
        return filterDataByKeyword(defaultData, searchKeyword.value)
    }
    return defaultData
})

// 根据关键词过滤数据
const filterDataByKeyword = (data, keyword) => {
    const result = []
    
    for (const item of data) {
        if (item.label.includes(keyword)) {
            result.push({ ...item })
            continue
        }
        
        if (item.children && item.children.length) {
            const filteredChildren = filterDataByKeyword(item.children, keyword)
            if (filteredChildren.length) {
                result.push({
                    ...item,
                    children: filteredChildren
                })
            }
        }
    }
    
    return result
}

// 处理节点点击
const handleNodeClick = (data) => {
    emit('node-click', data)
}

// 处理添加按钮点击
const handleAdd = () => {
    emit('add')
}
</script>

<style lang="less" scoped>
.dep-tree-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;

    .tree-header {
        padding: 10px;
        border-bottom: 1px solid #e6e6e6;
        
        .search-box {
            display: flex;
            align-items: center;
            width: 100%;
            
            .el-input {
                flex: 1;
                margin-right: 5px;
            }
        }
    }

    .tree-content {
        flex: 1;
        overflow: auto;
        padding: 10px;

        .custom-tree-node {
            display: flex;
            align-items: center;
            font-size: 14px;
            
            .el-icon {
                margin-right: 8px;
                font-size: 16px;
            }
        }

        :deep(.el-tree-node__content) {
            height: 32px;
        }

        :deep(.el-tree-node.is-current > .el-tree-node__content) {
            color: #409eff;
            background-color: #ecf5ff;
        }
    }
}
</style>